window.onload = function () {

    let form = layui.form;//加载layui表单
    // 1.发送ajax请求 渲染文章分类列表
    axios({
        url: '/my/article/cates',
        method: 'get'
    }).then(({ data: res }) => {
        //成功回调
        // console.log(res.data)
        let htmlArr = ['<option value="">请选择分类</option>']
        res.data.forEach(value => {
            //  这里的id  在筛选的时候 需要使用 
            htmlArr.push(`
                <option value="${value.Id}">${value.name}</option>
            `)
        })
        document.querySelector('[name="cate_id"]').innerHTML = htmlArr.join('')
        // layuiform赋值渲染
        form.render()
    });

    //      参数名	  必选	类型	  说明
    //      pagenum	  是	int	    页码值
    //      pagesize  是	int	    每页显示多少条数据
    //      cate_id	  否	string	文章分类的 Id
    //      state	  否	string	文章的状态，可选值有：已发布、草稿

    // 设置一个全局变量，筛选和分页都可以使用这个值！
    let q = {
        pagenum: 1,
        pagesize: 5,
        cate_id: '',
        state: '',
    }
    // 2.渲染文章列表
    RenderArticleList()
    function RenderArticleList() {
        axios({
            url: '/my/article/list',
            method: 'get',
            params: q
        }).then(({ data: res }) => {
            //成功回调
            // console.log(res.total)  总数据条数
            if (res.status !== 0) return layer.msg(res.message)//失败
            //成功
            let htmlArr = []
            // substr(起始下标, 截取长度) : 截取部分字符串
            res.data.forEach(value => {
                htmlArr.push(`
                  <tr>
                        <td>${value.title}</td>
                        <td>${value.cate_name}</td>
                        <td>${value.pub_date.substr(0, 19)}</td>
                        <td>${value.state}</td>
                        <td>
                            <button class="layui-btn layui-btn-normal layui-btn-xs ediBtn" data-id = "${value.Id}">编辑</button>
                            <button class="layui-btn layui-btn-danger layui-btn-xs delBtn" data-id = "${value.Id}">删除</button>
                        </td>
                    </tr>
            `)
            })
            document.querySelector('tbody').innerHTML = htmlArr.join('')
            // 分页渲染 总数据条数
            renderPage(res.total)
        });
    }

    // 3. 筛选按钮
    document.querySelector('#filterBtn').onclick = function (e) {
        e.preventDefault()
        // 获取到当前筛选的分类id   然后修改 对应的参数值
        let id = document.querySelector('[name="cate_id"]').value
        q.cate_id = id
        // 获取到当前删选的状态state   然后修改 对应的参数状态
        let state = document.querySelector('[name="status"]').value
        q.state = state
        //重新渲染文章列表
        RenderArticleList()
    }

    // 4.重置按钮
    document.querySelector('#resetBtn').onclick = function () {
        // 清空对应参数值
        q.cate_id = ''
        q.state = state = ''
        // 重新渲染文章列表
        q.pagenum = 1
        RenderArticleList()
    }


    // 5.删除按钮   委托事件 处理动态新增元素
    document.querySelector('tbody').onclick = function (e) {
        //如果当前点击的目标的内容包含  delbtn    
        if (e.target.classList.contains('delBtn')) {
            // 1.需要现在删除按钮上 设置自定义属性 获取id
            // 2.通过删除按钮的自定义属性 获取文章id
            let id = e.target.getAttribute('data-id')
            // 3.弹窗确认
            layer.confirm('是否确认删除?', { icon: 3, title: '提示' }, function (index) {
                // 发送ajax请求
                axios({
                    url: '/my/article/delete/' + id,
                    method: 'get'
                }).then(({ data: res }) => {
                    // 失败  
                    if (res.status !== 0) return layer.msg(res.message)
                    // 成功
                    layer.msg(res.message);
                    // (删除ajax成功后) 当我们再次发起请求的时候,如果页面中还有一条数据,当前页--,当前页大于等于2有资格--
                    //if($(".del-btn").length == 1 && q.pagenum >=2) q.pagenum--
                    // 优化 短路运算,前面的代码满足条件,后面的才会执行
                    $('.del-btn').length == 1 && q.pagenum >= 2 && q.pagenum--

                    //重新渲染文章列表
                    RenderArticleList()
                })
                // 关闭弹窗
                layer.close(index);
            });
        }

        // 如果当前点击的是编辑按钮
        if (e.target.classList.contains('ediBtn')) {
            //获取自定义属性id
            let id = e.target.getAttribute('data-id')
            //页面跳转
            location.href = '/article/art_editor.html?id=' + id

        }

    }


    // 6.分页
    function renderPage(total) {
        let laypage = layui.laypage
        //自定义排版
        laypage.render({
            elem: 'demo',
            count: total,//总数据条数
            limit: q.pagesize,// 每页显示多少条
            curr: q.pagenum,//第几页       
            layout: ['count', 'prev', 'page', 'next', 'limit', 'limit', 'skip'],
            limits: [5, 10, 15, 20],//每页条数的选择项
            jump: function (obj, first) {
                // obj包含了当前分页的所有参数,比如
                // console.log(obj.curr)//得到当前页面,以便向服务器端请求对应页的数据
                // console.log(obj.limit);得到每页显示的条数
                // 首次不执行
                if (!first) {
                    // 把当前页面改变,重新渲染文章列表
                    q.pagenum = obj.curr
                    // 把条数改变
                    q.pagesize = obj.limit
                    //初始化文章列表
                    RenderArticleList()
                }
            }
        })
    }
}